.Rectangle {
    position: absolute;
    top: 5%;
    left: 4%;
    width: 92%;
    height: 89%;
    opacity: 0.50;
    background: #252060;
    transition: opacity 1s ease-out;
}

.Word {
    color: white;
    position: absolute;
    top: 80%;
    left: 35%;
    font-size: 160%;
}

.Rectangle:hover {
    opacity: 0.8;
}

.Rectangle:hover .Word {
    font-size: 200%;
    top: 50%;
}

.col {
    padding: 15px;
}

.image {
    position: absolute;
}

.image2 {
    right: -2%;
    position: absolute;
}

.fade1-in {
    opacity: 0.4;
    transition: all .75s ease;
}

.fade1-in.show {
    opacity: 0.8;
    transform: translateX(80%);
}

.fade2-in {
    opacity: 0.4;
    transition: all .75s ease;
}

.fade3-in {
    opacity: 0.4;
    transition: all .75s ease;
}

.fade2-in.show {
    opacity: 0.8;
    transform: translateX(160%);
}

.fade3-in.show {
    opacity: 0.8;
    transform: translateX(240%);
}

.fade4-in {
    opacity: 0.4;
    transition: all .75s ease;
}

.fade4-in.show {
    opacity: 0.8;
    transform: translateX(-80%);
}

.fade5-in {
    opacity: 0.4;
    transition: all .75s ease;
}

.fade6-in {
    opacity: 0.4;
    transition: all .75s ease;
}

.fade5-in.show {
    opacity: 0.8;
    transform: translateX(-160%);
}

.fade6-in.show {
    opacity: 0.8;
    transform: translateX(-240%);
}

.Textfade {
    color: white;
    position: absolute;
    bottom: 2%;
    left: 12%;
    font-size: 200%;
}



@media  (max-width: 768px) {

    
    .Rectangle:hover .Word,
    .fade1-in, .fade1-in.show,
    .fade2-in, .fade2-in.show,
    .fade3-in, .fade3-in.show,
    .fade4-in, .fade4-in.show,
    .fade5-in, .fade5-in.show,
    .fade6-in, .fade6-in.show,
    .Textfade {
        display: none;
    }
 .Rectangle{
    opacity: 0.4;
    height: 67%;
    width: 75%;
    top: 16%;
    left: 13%;
 }
 .Word{
    font-size: 60%;
 }
 .desktop-only{
    display: none;
    
 }


}

@media (min-width: 769px) and (max-width: 2560px){
    .mobile-only{
        display: none;
    }


}